<template>
    <div>
        <div class="center">
            <div demo-bg>
                <dv-scroll-board :config="config" style="width: 307px; height: 90px" @mouseover="mouseoverHandler"
                    @click="clickHandler" />
            </div>
        </div>
    </div>

</template>

<script setup lang='ts'>
import { onMounted, reactive } from 'vue';
import { getzhiban } from '../request/api';

const config = reactive({
    header: ['姓名', '时间', '值班内容', '联系电话'],
    data: [['行1列1', '行1列2', '行1列3', '1']],
    index: true,
    columnWidth: [50],
    align: ['center']
})

onMounted(()=>{
    getzhiban().then(res=>{
        config.data=res.data.data.result[0].map((item,index)=>{
            return [item.eegs_id, item.eegs_time, item.eegs_dutyContent, item.eegs_phone]
        })
    })
})

const mouseoverHandler=(e:any)=>{
    console.log('mouseover', e)
}

const clickHandler=(e:any)=>{
    console.log('click', e)
}
</script>

<style scoped lang='scss'>
.center {
    color:white;
    height: 350px;
    margin-top: 15px;
    display: flex;
}
.demo-bg{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
}
.dv-scroll-board {
  width: 452px !important;
  height: 320px !important;
}
</style>